<template>
	<view class="container">
		<view class="card">
			<view class="card-header">NO: {{ record.no }}</view>
			<u-cell-group :border="false">
				<u-cell title="检测产品" :value="record.productName" :arrow="false"></u-cell>
				<u-cell title="法人姓名" :value="record.legalPerson" :arrow="false"></u-cell>
				<u-cell title="主体名称" :value="record.entityName" :arrow="false"></u-cell>
				<u-cell title="主体地址" :value="record.entityAddress" :arrow="false"></u-cell>
				<u-cell title="联系方式" :value="record.contact" :arrow="false"></u-cell>
			</u-cell-group>
		</view>

		<view class="card">
			<u-cell-group :border="false">
				<u-cell title="检查时间" :value="record.inspectionTime" :arrow="false"></u-cell>
				<u-cell title="检查部门" :value="record.department" :arrow="false"></u-cell>
				<u-cell title="检查地点" :value="record.location" :arrow="false"></u-cell>
				<u-cell title="合格证开具是否规范">
					<u-tag slot="right-icon" :text="record.specStatus" :type="record.specStatus === '合格' ? 'success' : 'error'" />
				</u-cell>
				<u-cell title="是否使用禁限用农药、兽药">
					<u-tag slot="right-icon" :text="record.pesticideStatus" :type="record.pesticideStatus === '合格' ? 'success' : 'error'" />
				</u-cell>
				<u-cell title="检查意见" :label="record.opinion" :arrow="false"></u-cell>
				<u-cell title="检查记录照片" :arrow="false"></u-cell>
				<view class="photo-container">
					<!-- TODO: 图片应从接口获取 -->
					<image v-if="record.photoUrl" :src="record.photoUrl" mode="widthFix" class="photo"></image>
					<view v-else class="no-photo">无图片</view>
				</view>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			record: {},
			recordId: null
		};
	},
	onLoad(options) {
		this.recordId = options.id;
		this.fetchRecordDetail();
	},
	methods: {
		fetchRecordDetail() {
			// TODO: 调用接口，根据this.recordId获取检查记录详情
			const mockData = {
				id: 1,
				no: '5101172023080800042',
				productName: '玉米',
				legalPerson: '六六六',
				entityName: '六六六生产主体',
				entityAddress: '众创空间',
				contact: '18408248888',
				inspectionTime: '2023-08-09 13:32:00',
				department: '成都市郫都区农业农村和林业局',
				location: '众创空间',
				specStatus: '合格',
				pesticideStatus: '合格',
				opinion: '开具规范，产品合格',
				photoUrl: '' // 示例图片URL，暂时为空
			};
			this.record = mockData;
		}
	}
};
</script>

<style scoped>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}
.card {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 0 20rpx;
}
.card-header {
	padding: 20rpx 0;
	font-size: 30rpx;
	font-weight: bold;
	border-bottom: 1rpx solid #eee;
}
.photo-container {
	padding: 20rpx;
}
.photo {
	width: 100%;
	border-radius: 8rpx;
}
.no-photo {
	color: #909399;
	text-align: center;
	padding: 40rpx 0;
}
</style>